<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
</head>
<body>
<!-- Page Content -->
<div class="content animated fadeIn">
    <h2 class="content-heading" id="toolbar">
        <button type="button" class="btn btn-sm btn-secondary float-right hexo-query" data-query-area="queryArea"><i class="fa fa-search text-success mr-5"></i> 查询</button>
        <button type="button" class="btn btn-sm btn-secondary float-right mr-5 hexo-refresh"><i class="fa fa-refresh mr-5"></i> 刷新</button>
        <button type="button" class="btn btn-sm btn-success float-right mr-5 hexo-unzip"><i class="fa fa-upload mr-5"></i> 上传安装</button>
        <button type="button" class="btn btn-sm btn-primary float-right mr-5 hexo-fetch"><i class="fa fa-download mr-5"></i> 拉取安装</button>
        <i class="fa fa fa-coffee"></i> 主题列表 <span id="totalNum"></span>
    </h2>
    <div class="block block-fx-shadow hide" id="queryArea">
        <div class="block-content block-content-full">
            <form class="form-inline" method="post" id="queryForm">
                <label class="sr-only" for="name">主题名称</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">主题名称</button>
                    </div>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="name" name="name">
                </div>
                <button type="button" class="btn btn-alt-primary mr-5" id="queryBtn">提交</button>
                <button type="reset" class="btn btn-alt-warning">重置</button>
            </form>
        </div>
    </div>
    <div class="block block-fx-shadow">
        <div class="block-content">
            <div class="row items-push js-gallery" id="themeBody"></div>
            <hr>
            <nav aria-label="Page navigation" id="pageBar"></nav>
        </div>
    </div>
</div>
<!-- END Page Content -->
<div th:replace="~{admin/common :: common-script}"></div>
<script th:inline="javascript">

    window.ThemeManager = {
        params: {},
        init: function() {

            $("#toolbar").find("button").on("click", function(e) {
                let $target = $(this);
                if ($target.hasClass("hexo-fetch")) {
                    $.hexo.modal._window("拉取安装", BASE_URL + "/fetchUI.html", 800, 310, false);
                } else if ($target.hasClass("hexo-unzip")) {
                    $.hexo.modal._window("解压安装", BASE_URL + "/unzipUI.html", 800, 356, false);
                } else if ($target.hasClass("hexo-refresh")) {
                    ThemeManager.query();
                } else if ($target.hasClass("hexo-query")) {
                    let $area = $("#" + $target.data("queryArea"));
                    if ($area.hasClass("hide")) {
                        $area.slideDown("slow");
                        $area.removeClass("hide");
                    } else {
                        $area.addClass("hide");
                        $area.slideUp("slow");
                    }
                }
            });

            // 绑定条件查询事件
            $("#queryBtn").on("click", function () {
                let formParamArr = $("#queryForm").serializeArray();
                let parameter = {};
                for (let i = 0, len = formParamArr.length; i < len; i++) {
                    parameter[formParamArr[i].name] = formParamArr[i].value;
                }
                ThemeManager.params = $.extend({}, ThemeManager.params, parameter);
                ThemeManager.query();
            });

            // 绑定更换主题事件
            $(document).on("click", ".change-btn, .config-btn, .code-btn, .remove-btn", function (e) {
                let $target = $(e.target);
                let themeId = $target.data("id");
                if (!themeId) {
                    return;
                }

                if ($target.hasClass("change-btn")) {
                    $.hexo.modal.confirm("确定要更换主题吗?", function () {
                        $.hexo.action.sendRequest({
                            url: BASE_URL + "/useTheme.json",
                            params: {id: themeId},
                            callback: function (resp) {
                                $.hexo.modal.tip("更换成功", "success", function () {
                                    ThemeManager.query();
                                });
                            }
                        });
                    });
                } else if ($target.hasClass("config-btn")) {
                    $.hexo.modal._window("主题配置", BASE_URL + "/configUI.html?id=" + $target.data("id"), 780, 540, true);
                } else if ($target.hasClass("code-btn")) {
                    $.hexo.modal._window("源码修改", BASE_URL + "/codeUI.html?id=" + $target.data("id"), 780, 540, true);
                } else if ($target.hasClass("remove-btn")) {
                    $.hexo.modal.confirm("确定要删除该主题吗?", function () {
                        $.hexo.action.sendRequest({
                            url: BASE_URL + "/remove.json",
                            params: {id: themeId},
                            callback: function (resp) {
                                if (resp.success) {
                                    $.hexo.modal.tip("删除成功", "success", function () {
                                        ThemeManager.query();
                                    });
                                } else {
                                    $.hexo.modal.tip(resp.message, "error");
                                }
                            }
                        });
                    });
                }
            });

            ThemeManager.query();
        },
        query: function () {
            $.hexo.action.sendRequest({
                url: BASE_URL + "/list.json",
                params: ThemeManager.params,
                callback: function (resp) {
                    ThemeManager.renderTable(resp.data);
                    $("#totalNum").html("(" + resp.data.total + ")");
                }
            });
        },
        renderTable: function(data) {
            ThemeManager.renderBody(data);
            ThemeManager.renderPageBar(data);
        },
        renderBody: function (data) {
            let themeList = data.list;
            let contentArr = [];
            if (themeList && themeList.length > 0) {
                for (let i = 0; i < themeList.length; i++) {
                    let obj = themeList[i];
                    contentArr.push('<div class="col-md-3 col-xl-3 animated fadeIn">');
                    contentArr.push('<div class="block block-fx-shadow text-center block-link-pop">');
                    contentArr.push('<div class="block block-content block-content-full block-sticky-options">');
                    contentArr.push('<img src="'+ obj.coverUrl +'" width="80%" height="230">');
                    contentArr.push('<div class="block-options">');
                    contentArr.push('<div class="dropdown">');
                    contentArr.push('<button type="button" class="btn-block-option" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i></button>');
                    contentArr.push('<div class="dropdown-menu dropdown-menu-right" style="">');
                    contentArr.push('<a class="dropdown-item config-btn" href="javascript:void(0)" data-id="'+ obj.id +'"><i class="fa fa-fw fa-edit mr-5"></i>配置参数</a>');
                    contentArr.push('<a class="dropdown-item code-btn" href="javascript:void(0)" data-id="'+ obj.id +'"><i class="fa fa-fw fa-pencil mr-5"></i>修改源码</a>');
                    contentArr.push('<div class="dropdown-divider"></div>');
                    contentArr.push('<a class="dropdown-item remove-btn" href="javascript:void(0)" data-id="'+ obj.id +'"><i class="fa fa-fw fa-remove mr-5"></i>删除主题</a>');
                    contentArr.push('</div>');
                    contentArr.push('</div>');
                    contentArr.push('</div>');
                    contentArr.push('</div>');
                    contentArr.push('<div class="block-content block-content-full block-content-sm bg-body-light">');
                    contentArr.push('<div class="font-w600 mb-5">'+ obj.name +'</div>');
                    contentArr.push('</div>');
                    contentArr.push('<div class="block-content block-content-full">');
                    contentArr.push('<div class="mb-5">');
                    if (obj.state) {
                        contentArr.push('<button type="button" class="btn btn-alt-danger mr-5 mb-5" title="使用中">');
                        contentArr.push('<i class="fa fa-power-off"></i>');
                        contentArr.push('</button>');
                    } else {
                        contentArr.push('<button type="button" class="btn btn-alt-success mr-5 mb-5 change-btn" data-id="'+ obj.id +'" title="点击更换">');
                        contentArr.push('<i class="fa fa-exchange"></i>');
                        contentArr.push('</button>');
                    }
                    contentArr.push('</div>');
                    contentArr.push('</div>');
                    contentArr.push('</div>');
                    contentArr.push('</div>');

                }
            } else {
                contentArr.push('<div class="col-md-12 col-lg-12 col-xl-12 animated fadeIn text-center"><h5>暂无主题</h5></div>');
            }

            $("#themeBody").html(contentArr.join(""));
        },
        renderPageBar: function (data) {
            let $pageBar = $("#pageBar");
            if (!data.list || data.list.length === 0) {
                $pageBar.html("");
                return;
            }
            let pageArr = [];
            pageArr.push('<ul class="pagination justify-content-end mr-20">');
            pageArr.push('<li class="page-item">');
            pageArr.push('<a class="page-link" href="javascript:void(0)" aria-label="Previous" data-num="'+ data.prePage +'">');
            pageArr.push('<span aria-hidden="true">');
            pageArr.push('<i class="fa fa-angle-left"></i>');
            pageArr.push('</span>');
            pageArr.push('<span class="sr-only">Previous</span>');
            pageArr.push('</a>');
            pageArr.push('</li>');
            let currentNum = data.pageNum;
            let pageNumArr = data.navigatepageNums;
            for (let i = 0; i < pageNumArr.length; i ++) {
                let pageNum = pageNumArr[i];
                let activeClass = (currentNum === pageNum ? 'active' : '');
                pageArr.push('<li class="page-item ' + activeClass + '">');
                pageArr.push('<a class="page-link" href="javascript:void(0)" data-num="' + pageNum + '">' + pageNum + '</a>');
                pageArr.push('</li>');
            }
            pageArr.push('<li class="page-item">');
            pageArr.push('<a class="page-link" href="javascript:void(0)" aria-label="Next" data-num="'+ data.nextPage +'">');
            pageArr.push('<span aria-hidden="true">');
            pageArr.push('<i class="fa fa-angle-right"></i>');
            pageArr.push('</span>');
            pageArr.push('<span class="sr-only">Next</span>');
            pageArr.push('</a>');
            pageArr.push('</li>');
            pageArr.push('</ul>');

            $pageBar.html(pageArr.join("")).find("a").off("click").on("click", function (e) {
                let num = $(e.target).data("num");
                if (!num || num < 1 ) {
                    console.warn("=====当前列表不能翻页====");
                    return;
                }

                ThemeManager.params = $.extend({}, ThemeManager.params, {"pageNum": num});
                ThemeManager.query();
            });
        }
    };

    ThemeManager.init();


</script>
</body>
</html>